import React, {useEffect, useState} from 'react';
import {View, Text,Image, TouchableOpacity, TextInput} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import {Icon, Toast, Radio} from '@ant-design/react-native';
import {sendMsg, register} from '../../service/login';

let count = 60;

const Register = () => {
  const navigation = useNavigation();
  const [passWd, setPassWd] = useState(0); // 是否激活发送按钮
  const [phone, onChangePhone] = useState('');
  const [smsCode, onChangeSmsCode] = useState('');
  const [password, onChangeTextPassword] = useState('');
  const [repeatPassword, onChangeTextRepeatPassword] = useState('');
  const [secureText, setSecureText] = useState(true);
  const [secureTextRe, setSecureTextRe] = useState(true);
  const [radioChecked, setRadioChecked] = useState(false);
  const [countDown, setCountDown] = useState(60);
  
  useEffect(() => {
    console.log(phone);
    navigation.setOptions({
      title: '注册'
    });

    navigation.addListener('focus', () => {
      count = 60;
    });
  }, [navigation]);

  // 发送倒计时
  const timer = () => {
    let _timer = setInterval(()=>{
      --count;
      if(count>0){
        setCountDown(count);
      }else{
        setPassWd(0);
        count = 60;
        setCountDown(count);
        clearInterval(_timer);
      }
    }, 1000);
  };

  const sendMsgRequest= () => {
    sendMsg({phone}).then(res => {
      // console.log(res);
      if(res.code===200){
        Toast.success('发送成功', 1);
      }else{
        Toast.success(res.msg, 1);
      }
    });
  };

  const registerRequest= () => {
    if(radioChecked){
      register({
        phone,
        password,
        smsCode
      }).then(res => {
        // console.log(res);
        if(res.code===200){
          Toast.success('注册成功，跳转登录页...', 1);
          setTimeout(() => {
            // navigation.replace('Login');
            navigation.goBack();
          }, 1000);
        }
        Toast.fail(res.msg);
      });
    }else{
      Toast.fail('请勾选同意协议', 2);
    }
  };

  return (
    <AreaView>
      <View style={styles.flex_1}>
        <View style={styles.logo_area}>
          <Image style={styles.logo}
            source={require('../../assets/images/logo.png')}
          />
        </View>
        <View style={[styles.input_container, styles.top]}>
          <Text style={styles.font_color}>+86  |</Text>
          <TextInput
            keyboardType="numeric"
            style={[styles.input, styles.input_tel]} placeholder="请输入手机号" value={phone}
            onChangeText={text => onChangePhone(text)}
          />
        </View>
        <View style={styles.input_container}>
          <TextInput style={styles.input} placeholder="请输入验证码" value={smsCode}
            onChangeText={text => onChangeSmsCode(text)}
          />
          <TouchableOpacity  activeOpacity={1} style={styles.send_msg}
            onPress = {() => {
              if(passWd===0){
                if(phone?.length !== 11) {
                  Toast.info('请输入手机号');
                  return;
                }
                setPassWd(1);
                timer();
                sendMsgRequest();
              }
            }}
          >
            {passWd>0 ? (
              <Text style={styles.send_msg_text}>{countDown}</Text>
            ) : (
              <Text style={styles.send_msg_text_origin }>获取验证码</Text>
            )}
            {/* <Text style={ passWd>0 ? styles.send_msg_text : styles.send_msg_text_origin }>获取验证码</Text> */}
          </TouchableOpacity>
        </View>
        <View style={styles.input_container}>
          <Icon name="lock" style={styles.passwd_clock} />
          <TextInput style={styles.input} placeholder="请设置6-20位的登录密码" value={password} 
            secureTextEntry={secureText}
            onChangeText={text => onChangeTextPassword(text)}
          />
          <TouchableOpacity
            onPress={() => {
              setSecureText(!secureText);
            }}
          >
            <Icon name={secureText ? "eye" : "eye-invisible"} style={styles.passwd_clock} />
          </TouchableOpacity>
        </View>
        <View style={styles.input_container}>
          <Icon name="lock" style={styles.passwd_clock} />
          <TextInput style={styles.input} placeholder="请再次确认登录密码" value={repeatPassword} 
            secureTextEntry={secureTextRe}
            onChangeText={text => onChangeTextRepeatPassword(text)}
          />
          <TouchableOpacity
            onPress={() => {
              setSecureTextRe(!secureTextRe);
            }}
          >
            <Icon name={secureTextRe ? "eye" : "eye-invisible"} style={styles.passwd_clock} />
          </TouchableOpacity>
        </View>
        <View style={styles.btn_container}>
          <TouchableOpacity  activeOpacity={1} style={styles.btn}
            onPress = {() => {
              registerRequest();
            }}
          >
            <Text style={styles.btn_text}>注册</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.login_text}>
          <Text style={styles.font_color}>已有账户</Text>
          <TouchableOpacity
            onPress={() => {
              // navigation.push('Login');
              navigation.goBack();
            }}
          >
            <Text style={styles.btn_color}>立即登录</Text>
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.bottom_text}>
        <TouchableOpacity
          onPress={() => {
            setRadioChecked(!radioChecked);
          }}
        >
          <Icon name={ radioChecked ? "check-square" : "border" } style={styles.passwd_clock} />
        </TouchableOpacity>
        <Text style={styles.font_color}>我已同意</Text>
        <TouchableOpacity
          onPress={() => {
            navigation.push('Protocol', {
              pid: '04'
            });
          }}
        >
          <Text style={styles.btn_color}>《用户服务协议》</Text>
        </TouchableOpacity>
        <Text style={styles.font_color}>和</Text>
        <TouchableOpacity
          onPress={() => {
            navigation.push('Protocol', {
              pid: '06'
            });
          }}
        >
            <Text style={styles.btn_color}>《协议隐私》</Text>
        </TouchableOpacity>
      </View>
    </AreaView>
  );
};

export default Register;
